import './style.css'
import * as THREE from 'three';
import WebGL from 'three/addons/capabilities/WebGL.js';
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"


/* 场景 */
const scene = new THREE.Scene();
/* 透视摄像机 */
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
/* 渲染器 */
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 添加世界坐标辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

//创建长方体
const BoxGeometry = new THREE.BoxGeometry(1,1,100)
const  boxMaterial = new THREE.MeshBasicMaterial({
  color: 0x00ff00
})
const box = new THREE.Mesh(BoxGeometry,boxMaterial)
scene.add(box)

// 创建场景 雾

// scene.fog = new THREE.Fog(0x999999,0.1,50)

//创建场景 指数雾
scene.fog = new THREE.FogExp2(0x999999,0.2)
scene.background = new THREE.Color(0x999999)

camera.position.z = 5;
camera.position.y = 2;
camera.position.x = 2;
camera.lookAt(0, 0, 0)

// 添加轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)
// 设置带阻尼的惯性
controls.enableDamping = true;
// 设置阻尼系数 
controls.dampingFactor = 0.01;
// 自动旋转
// controls.autoRotate = true;

function animate() {
  requestAnimationFrame(animate);
  controls.update()
  renderer.render(scene, camera);
}
// webgl兼容性检查
if (WebGL.isWebGLAvailable()) {
  animate();
} else {
  const warning = WebGL.getWebGLErrorMessage();
  document.getElementById('app').appendChild(warning);
}





